@model LoginViewModel
@{ 
    Layout = "_EmptyLayout";
}
@Html.AntiForgeryToken()
<div id="loginPage">


    <div class="loginFrom">
        
        @if (Model.EnableLocalLogin)
        {
            <h1>用户管理中心</h1>
            <el-form label-position="top" label-width="80px" v-bind:model="loginForm">
                <el-form-item label="用户名">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
                @if (Model.AllowRememberLogin)
                {
            <el-form-item label="">
                <el-checkbox label="记住我" v-model="loginForm.rememberLogin" name="rememberLogin"></el-checkbox>
                <div style="color:white">默认账号:bob  密码:Pass123$</div>
            </el-form-item>
                }

                <el-form-item style="text-align: center;">
                    <el-button class="lgBtn" type="primary" v-on:click="submitLogin(true)">登陆</el-button>
                    <el-button v-on:click="submitLogin(false)">取消</el-button>
                     <el-button v-on:click="onRegisterClick()">注册</el-button>
                </el-form-item>
               
            </el-form>
        }

        @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
        {
            <div class="alert alert-warning">
                <strong>Invalid login request</strong>
                There are no login schemes configured for this request.
            </div>
        }
    </div>
</div>
@section scripts
{
    <script>
   var vm = new Vue({
        el: '#loginPage',
        data() {
            return {
                loginForm: {
                    userName: '',
                    passWord: '',
                    rememberLogin: false,
                    returnUrl: "",
                    isLogin: true,
                    __RequestVerificationToken:null
                    
                },
                
            };
        },
        methods: {
            submitLogin(isLogin) {
                var token = document.querySelector('token, input').getAttribute('value');
                console.log(token)
                this.loginForm.__RequestVerificationToken = token;
                if (isLogin) {
                    var url = "@Html.Raw(@Model.ReturnUrl)";
                    this.loginForm.returnUrl = url;
                    console.log(url)
                 
                    post("login", this.loginForm).then(res => {
                        console.log(res);
                    })
                } else {
                    this.loginForm.isLogin = false
                    post("login", this.loginForm)
                }
            },
            onRegisterClick(){
                 var url = "@Html.Raw(@Model.ReturnUrl)";
                window.location.href = "register?returnUrl=" + url;
            }
        }
    })
</script>
}
@section styles{
    <style>
    #loginPage {
        height: 100%;
       
    }
    .loginFrom {
        width: 500px;
        background-color: #072436;
        opacity: 0.6;
        position: absolute;
        left: 70%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 20px;
        border-radius:5px;
    }
    .loginFrom > h1{
        text-align:center;
        margin-bottom:50px;
        color:white;
    }
    .el-form-item__label{
        color:white;
        font-weight:bold;
    }
    .el-checkbox__label{
        color:white;
    }
    .lgBtn {
        background-color: #314C5D;
        border-color: #314C5D;
    }
        .lgBtn:hover {
            background-color: #190710;
            border-color: #190710;
        }
        .lgBtn:focus {
            background-color: #190710;
            border-color: #190710;
        }
</style>
}
